


How to Make an Instagram DM Mockup

by xslytherclawx



Category: No Fandom
Genre: mockup, reference
Language: English
Status: Completed
Published: 2017-09-11
Updated: 2017-09-11
Packaged: 2018-12-16 06:22:58
Rating: Not Rated
Warnings: No Archive Warnings Apply
Chapters: 1
Words: 601
Publisher: archiveofourown.org
Story URL: https://archiveofourown.org/works/11823021
Author URL: https://archiveofourown.org/users/xslytherclawx/pseuds/xslytherclawx
Summary: What it says on the tin.A mock-up of instagram direct messages without having to use screenshots.





	How to Make an Instagram DM Mockup

**Author's Note:**

> A million thanks to [La_Temperanza](http://archiveofourown.org/users/La_Temperanza/pseuds/La_Temperanza) for letting me post this modification of her iOS template and helping me figure out how to post the HTML!

I needed to create an instagram DM mockup for one of my fics, so I was able to modify [La_Temperanza](http://archiveofourown.org/users/La_Temperanza/pseuds/La_Temperanza)'s [iOS messaging](http://archiveofourown.org/works/6434845/chapters/14729722) template to replicate Instagram DMs.

To use this, you need to know how to use work skins – it's pretty simple, and explained in the link above. You can either add this into an existing work skin or make a new one, but AO3 will break CSS if you mess with it too much.

I wasn't able to get the coding for the icon to work quite right, but this serves the purpose. 

**Messages with** username  
  
**REPLY:** Message  
  
**INCOMING:** Message

and you can even have regular text right underneath; it integrates pretty seamlessly.

* * *

**CSS (for the work skin):**

 

>  #workskin .instaDM {<br />  
>  max-width: 300px;<br />  
>  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;<br />  
>  display: table;<br />  
>  margin: auto;<br />  
>  }<br />  
>  <br />  
>  #workskin .headerIDM {<br />  
>  min-width: 300px;<br />  
>  background-color: #f6f6f6;<br />  
>  border-bottom: 1px solid #b2b2b2;<br />  
>  color: #000000;<br />  
>  font-weight: bold;<br />  
>  padding-bottom: .5em;<br />  
>  padding-top: .5em;<br />  
>  margin-left: -.5em;<br />  
>  margin-right: -.5em;<br />  
>  margin-bottom: -2em;<br />  
>  text-align: center;<br />  
>  display: table;<br />  
>  }<br />  
>  <br />  
>  #workskin .messagebodyIDM {<br />  
>  background-color: #FFFFFF;<br />  
>  display: table;<br />  
>  padding-left: .5em;<br />  
>  padding-right: .5em;<br />  
>  }<br />  
>  <br />  
>  #workskin .textIDM {<br />  
>  float: left;<br />  
>  color: #000000;<br />  
>  margin: 0 0 0.5em;<br />  
>  border-radius: 1em;<br />  
>  padding: 0.5em 1em;<br />  
>  background: #ffffff;<br />  
>  max-width: 75%;<br />  
>  clear: both;<br />  
>  position: relative;<br />  
>  border-bottom: 1px solid #b2b2b2;<br />  
>  border-top: 1px solid #b2b2b2;<br />  
>  border-left: 1px solid #b2b2b2;<br />  
>  border-right: 1px solid #b2b2b2;<br />  
>  }<br />  
>  <br />  
>  #workskin .textIDM::after {<br />  
>  content: "";<br />  
>  position: absolute;<br />  
>  left: -.5em;<br />  
>  bottom: 0;<br />  
>  width: 0.5em;<br />  
>  height: 1em;<br />  
>  }<br />  
>  <br />  
>  #workskin .replyIDM {<br />  
>  float: right;<br />  
>  color: #000000;<br />  
>  margin: 0 0 0.5em;<br />  
>  border-radius: 1em;<br />  
>  padding: 0.5em 1em;<br />  
>  background: #e5e5ea;<br />  
>  max-width: 75%;<br />  
>  clear: both;<br />  
>  position: relative;<br />  
>  }<br />  
>  <br />  
>  #workskin .replyIDM::after {<br />  
>  content: "";<br />  
>  position: absolute;<br />  
>  right: -0.5em;<br />  
>  bottom: 0;<br />  
>  width: 0.5em;<br />  
>  height: 1em;<br />  
>  }<br />  
>  <br />  
>  #workskin .hide {<br />  
>  display: none;<br />  
>  }<br />

This needs to be pasted into a new work skin (or added to an existing work skin)

* * *

and the **HTML** (to paste into the document itself):

 

> <p></p><div class="instaDM">  
>    
>  <p class="messagebodyIDM"><span class="headerIDM"><span class="hide"><b>Messages with </b></span>username</span><br />  
>  <br />  
>  <span class="replyIDM"><span class="hide"><b>REPLY: </b></span>Message</span><br />  
>  <br />  
>  <span class="textIDM"><span class="hide"><b>INCOMING: </b></span>Message</span></p>  
>  </div>
> 
>  

Make sure you're on the HTML tab or else this will look like... well, what it looks like right there. It's pretty simple, straightforward HTML, but make sure not to lose the end div tag, or else everything in the document will be restricted to the width of the DM.

A few notes:

  * obviously, you replace "Message" with the message itself.
  * "INCOMING" and "username" should be the same instagram username (the person being contacted).
  * "REPLY" is the person doing the contacting; to make it flow, you should use an instagram username.
  * By changing reply / incoming, you make it so that the conversation can be viewed without the work skin (which is very useful if it gets saved to PDF or viewed through a reader app). You can, if you choose, delete that, but I always like to leave those tags on hidden just in case. Since there are no pictures, with work skin off, it just looks like a line of text (you can view this by hiding creator's style here right now)



**Author's Note:**

> To see this implemented in a fic (along with some other fun CSS), you can look at chapter 25 of my fic "What Happens on Erasmus" [here](http://archiveofourown.org/works/10766892/chapters/26929572).


End file.
